<template>
    <div>
        <div style="width: 70%;background-color: white;margin: 30px auto;border-radius: 20px;">
            <div>
                <div
                    style="font-weight: bold; font-size: 18px;color: #000000FF;line-height: 80px;border-bottom: #cccccc 1px solid;">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我的地址
                    <el-button @click="addVisibleStatus()"
                        style="float: right;margin-top: 20px;margin-right: 20px; height: 40px; width: 150px;font-size: 16px; border-radius: 20px;"
                        type="primary">添加收货地址</el-button>
                </div>
                <div>
                </div>
                <div style="margin: 20px 0; margin-left: 60px;margin-right: 60px;">
                    <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                        style="width: 100%;">
                        <el-table-column prop="username" label="收货人" width="280" align=center />
                        <el-table-column prop="address" label="收货地址" width="340" align=center />
                        <el-table-column prop="phone" label="电话号码" width="280" align=center />
                        <el-table-column label="操作" width="280" align=center>
                            <template #default="scope">
                                <el-button @click="updateVisibleStatus(scope.row.id)" type="success" plain>编辑</el-button>
                                <el-popconfirm title="您确认要移除嘛?" @confirm="deleteAddress(scope.row.id)"
                                    confirm-button-text="确认" cancel-button-text="取消" icon-color="red"
                                    style="height: 400px">
                                    <template #reference>
                                        <el-button type="danger" plain>移除地址</el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!--编辑对话框-->

                    <el-dialog v-model="updateVisible" title="修改地址" width="500" >
                        <el-form style="max-width: 600px" :model="updateForm" label-width="auto">
                            <el-form-item label="收货人"  >
                                <el-input v-model="updateForm.username" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="收货地址" style="margin-top:30px">
                                <el-input v-model="updateForm.address" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="电话号码" style="margin-top:30px">
                                <el-input v-model="updateForm.phone" />
                            </el-form-item>
                            <el-form-item style="margin-top:30px">
                                <el-button type="primary" @click="updateAddress()">
                                    确认
                                </el-button>
                                <el-button @click="updateVisibleClose()">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>

                    <!-- 添加对话框 -->

                    <el-dialog v-model="addVisible" title="添加地址" width="500" :close="addClose()">
                        <el-form style="max-width: 600px" :model="addForm" label-width="auto">
                            <el-form-item label="收货人">
                                <el-input v-model="addForm.username" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="收货地址" style="margin-top:30px">
                                <el-input v-model="addForm.address" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="电话号码" style="margin-top:30px">
                                <el-input v-model="addForm.phone" />
                            </el-form-item>
                            <el-form-item style="margin-top:30px">
                                <el-button type="primary" @click="addAddress()">
                                    确认
                                </el-button>
                                <el-button @click="addVisibleClose()">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>

                    <!-- 分页 -->
                    <div>
                        <el-pagination style="margin: 0px auto;height: 100px;" small background
                            @current-change="currentChange" :current-page="currentPage" :page-size="pageSize"
                            layout="prev, pager, next" :total="tableData.length" class="mt-4" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { selectOne,addOne, selectByUser, deleteOne,updateOne } from "../../api/index";

export default {
    data() {
        return {
            tableData: [],
            goodsData: [],
            typeData: {},
            sellerData: {},
            user: JSON.parse(JSON.stringify(this.$store.getters.getUser)),
            currentPage: 1,
            pageSize: 10,
            updateVisible: false,
            addVisible: false,
            addForm: {
                userId:JSON.parse(JSON.stringify(this.$store.getters.getUser)).id,
                username: "",
                address: "",
                phone: ""
            },
            updateForm: {
                id: "",
                userId: "",
                username: "",
                address: "",
                phone: ""
            }
        }
    },
    created() {
        selectByUser("address", this.user.id).then(res => {
            if (res.code === 200) {
                this.tableData = res.data;
            } else {
                this.$message.error(res.message)
            }
        })
    },
    methods: {
        updateVisibleStatus(id) {
            selectOne("address",id).then(res=>{
                if(res.code===200){
                    this.updateForm = res.data;
                }else{
                    this.$message.error(res.message)
                }
            })
            this.updateVisible = true;
        },
        navGo(url) {
            this.$router.push(url);
        },
        currentChange(val) {
            this.currentPage = val;
        },
        deleteAddress(id) {
            deleteOne("address", id).then(res => {
                if (res.code === 200) {
                    this.$message.success(res.message);
                    selectByUser("address", this.user.id).then(res => {
                        if (res.code === 200) {
                            this.tableData = res.data;
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        addVisibleStatus() {
            this.addVisible = true;
        },
        addClose() {
            this.addForm.username = "",
                this.addForm.phone = "",
                this.addForm.address = ""
        },
        addVisibleClose() {
            this.addVisible = false;
        },
        addAddress() {
            addOne("address", this.addForm).then(res => {
                if (res.code === 200) {
                    this.$message.success(res.message);
                    selectByUser("address", this.user.id).then(res => {
                        if (res.code === 200) {
                            this.tableData = res.data;
                            this.addVisible=false;
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }else{
                    this.$message.error(res.message)
                }
            })
        },
        updateVisibleClose(){
            this.updateVisible=false;
        },
        updateAddress(){
            updateOne("address",this.updateForm).then(res=>{
                if(res.code===200){
                    this.$message.success(res.message);
                    selectByUser("address", this.user.id).then(res => {
                        if (res.code === 200) {
                            this.tableData = res.data;
                            this.addVisible=false;
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                    this.updateVisible=false;
                }else{
                    this.$message.error(res.message);
                }
            })
        }

    }
}

</script>

<style>
body {
    background-color: #efebeb
}

a:hover {
    color: red;
}

a {
    text-decoration: none;
    color: #666666
}
</style>